<template>
  <div>
    <!--<div class="analyzeSystem">
      <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
    </div>-->
    <div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ertongliantiku"></use>图标测试
      </svg>
    </div>
  </div>

</template>

<script>
import echarts from "echarts";

export default {
  name: "analyzeSystem",
  props: {
    className: {
      type: String,
      default: "yourClassName"
    },
    id: {
      type: String,
      default: "yourID"
    },
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "500px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myEchart);
      // 把配置和数据放这里
      this.axios.post('http://localhost:3000/barData').then((res) => {
        //第一步，从接口里取到数据，注意回调函数中的参数是用来接收接口里的数据的，所以参数.data就是我们要获取的数据
        //第二步，定义一个对象数组，对象数组是数组，用来存放要给option里的data的数据
        //第三步，遍历从接口拿回的数据，也就是res.data，将这些数据存入一个对象中
        //第四步，通过给这个对象赋予不同的属性，属性的值从接口接到的值中要
        //第五步，然后将赋好属性的对象放进定义好的数组中
        //第六步，将对象数组作为图表的data即可
        let array = new Array();
        for (let i = 0; i < res.data.length; i++) {
          let obj = new Object();
          obj.name = res.data[i].name;
          obj.value = res.data[i].num;
          array.push(obj);
        };
        this.chart.setOption({
          backgroundColor: "#2c343c",
          title: {
            text: "Customized Pie",
            left: "center",
            top: 20,
            textStyle: {
              color: "#ccc"
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "55%",
              center: ["50%", "50%"],

              data: array.sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: "radius",
              label: {
                normal: {
                  textStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: "#c23531",
                  shadowBlur: 200,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },

              animationType: "scale",
              animationEasing: "elasticOut",

              //原例子中，此函数的参数是idx，eslint会报错，故暂时去掉了
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        })
      })
    }
  }
};
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
.icon {
  width: 2em; height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
